<template>
	<view class="setting-container">
		<u-toast ref="settingToast"></u-toast>
		<view class="setting-card-container">
			<view class="setting-card-image-container">
				<image class="bgc-png" src="../../static/png/bg.png" alt=""/>
			</view>
			<view class="setting-card-detail-container">
				<!-- 第一行扫一扫 -->
				<view class="setting-card-detail-container-sweep-icon-container">
					<view class="setting-card-detail-container-sweep-icon-bgc-content" @click="sweep">
						<view class="setting-card-detail-container-sweep-icon-item iconfont icon-saoyisao"></view>
					</view>
				</view>
				<!-- 中间头像 名字 -->
				<view class="setting-card-detail-container-person-container" >
					<view class="setting-card-detail-container-person-avatar-container" @click="changeFlag('isShowPersonDetail', true)">
						<!-- 头像 -->
						<image class="setting-card-detail-container-person-avatar-bgc-content" :src="user.avatar"></image>
					</view>
					<view class="setting-card-detail-container-person-name-container" @click="changeFlag('isShowPersonDetail', true)">
						<view class="setting-card-detail-container-person-name-content">
							{{user.username}}
						</view>
						<view class="setting-card-detail-container-person-icon-container">
							<view class="setting-card-detail-container-person-icon-content iconfont icon-bianji"></view>
						</view>
					</view>
				</view>
				<!-- 底下三个数据 -->
				<view class="setting-card-detail-container-total-data-container">
					<!-- 第一个连续记账 -->
					<view class="setting-card-detail-container-total-data-continuity-sign-day-container">
						<view class="setting-card-detail-container-total-data-continuity-sign-day-day">{{ continuityDay ? continuityDay : 0}}</view>
						<view class="setting-card-detail-container-total-data-continuity-sign-day-title">已连续记账</view>
					</view>
					<!-- 第二个 记账总天数 -->
					<view class="setting-card-detail-container-total-data-total-day-booking-container">
						<view class="setting-card-detail-container-total-data-total-day-booking-data">{{ totalDay ? totalDay : 0}}</view>
						<view class="setting-card-detail-container-total-data-total-day-booking-title">记账总天数</view>
					</view>
					<!-- 第一个 记账总笔数 -->
					<view class="setting-card-detail-container-total-data-total-data-booking-container">
						<view class="setting-card-detail-container-total-data-total-data-booking-data">{{ totalBills ? totalBills : 0}}</view>
						<view class="setting-card-detail-container-total-data-total-data-booking-title">记账总笔数</view>
					</view>
				</view>
			</view>
		</view>
		<view class="setting-card-setting-container" v-for="(item, index) in settingList" :key="index">
			<view :class="['setting-card-setting-item-container', 'animate__animated', {'animate__fadeOutRight': item1.flag}]" v-for="(item1, index1) in item" :key="index1" @click="changeItemFlag(item1, true)">
				<view class="setting-card-setting-item-left-container">
					<view :class="['setting-card-setting-item-left-icon', 'iconfont', item1.icon]" :style="{color: item1.color}"></view>
					<view class="setting-card-setting-item-right-content">{{item1.name}}</view>
				</view>
				<view class="setting-card-setting-item-right-container">
					<view class="setting-card-setting-item-right-icon iconfont icon-xiangyou1"></view>
				</view>
			</view>
		</view>
		<!-- 头像名字弹框 -->
		<u-popup :show="isShowPersonDetail" :round="20" mode="center" @close="changeFlag('isShowPersonDetail', false)" @open="changeFlag('isShowPersonDetail', true)">
			<view class="person-container">
				<view class="person-container-avatar-container" @click="upload">
					<view class="person-container-avatar-content">
						<image :src="user.avatar" style="width: 70%;height: 70%;border-radius: 50%;"></image>
						<view class="person-container-avatar-camera-container">
							<view class="person-container-avatar-camera-icon iconfont icon-zhaoxiangji"></view>
						</view>
					</view>
					<!-- <u-upload  ref="uUpload" class="upload-avatar" :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="avatar" multiple :maxCount="1"></u-upload> -->
				</view>
				<view class="person-container-name-container">
					<view class="person-container-name-input-containe">
						<u--input style="width: 100%;height: 100%;" border="none" v-model="user.username" placeholder="输入一个昵称" @change="change('name')" :fontSize="15"></u--input>
					</view>
				</view>
				<view class="person-container-confirm-container">确定</view>
			</view>
		</u-popup>
		<!-- 账本分类弹框 -->
		<u-popup :show="isLedgerFlag" :round="roundNum" mode="bottom" @close="changeFlag('isLedgerFlag', false)" @open="changeFlag('isLedgerFlag', true)">
			<ledger :ledgerList="accountBookList" @addCategory="changeFlag('isShowCategoryDetail', true)" @closeBtn="changeFlag('isLedgerFlag', false)" @showAccountDetail="showAccountDetailCallback" @deleteAccountDetail="deleteAccountBook"></ledger>
		</u-popup>
		<!-- 账本详情 -->
		<u-popup :show="isShowEditDialog" :round="roundNum" mode="bottom" @close="changeFlag('isShowEditDialog', false)" @open="changeFlag('isShowEditDialog', true)">
			<detail @closeEditDialog="changeFlag('isShowEditDialog', false)" :accountBook="accountBook" ></detail>
		</u-popup>
		<!-- 新增分类弹框 -->
		<u-popup :show="isShowCategoryDetail" :round="20" mode="bottom" @close="changeFlag('isShowCategoryDetail', false)" @open="changeFlag('isShowCategoryDetail', true)">
			<category-detail @closeCategoryDetail="changeFlag('isShowCategoryDetail', false)"></category-detail>
		</u-popup>
		<!-- 分类管理 -->
		<u-popup :show="isCategoryFlag" :round="20" mode="bottom" @close="changeFlag('isCategoryFlag', false)" @open="changeFlag('isCategoryFlag', true)">
			<category-manage @closeBtn="changeFlag('isCategoryFlag', false)" @showBillDetail="changeFlag('isBillDetailFlag', true)" :accountBookList="accountBookList"></category-manage>
		</u-popup>
		<!-- 新增账单 -->
		<u-popup :show="isBillDetailFlag" :round="20" mode="bottom" @close="changeFlag('isBillDetailFlag', false)" @open="changeFlag('isBillDetailFlag', true)">
			<bill-detail @closeBtn="changeFlag('isBillDetailFlag', false)" :bill="bill" @showCategory="changeFlag('showCategoryPopupFlag', true)"></bill-detail>
		</u-popup>
		<!-- 预算管理 -->
		<u-popup :show="isBudgetFlag" :round="20" mode="bottom" @close="changeFlag('isBudgetFlag', false)" @open="changeFlag('isBudgetFlag', true)">
			<budget @closeBtn="changeFlag('isBudgetFlag', false)" :accountBookList="accountBookList" :bill="bill" @showCategory="changeFlag('showCategoryPopupFlag', true)"></budget>
		</u-popup>
		<!-- 其他设置 -->
		<u-popup :show="isOtherSettingFlag" :round="20" mode="bottom" @close="changeFlag('isOtherSettingFlag', false)" @open="changeFlag('isOtherSettingFlag', true)">
			<other @closeBtn="changeFlag('isOtherSettingFlag', false)"></other>
		</u-popup>
	</view>
</template>

<script>
	import detail from '@/components/detail/detail';
	import ledger from './components/ledger/ledger';
	import categoryManage from './components/category-manage/category-manage.vue';
	import budget from './components/budget/budget.vue';
	import other from './components/other/other.vue';
	import billDetail from '@/components/bill-detail/bill-detail';
	import {removeToken} from "@/util/auth.js";
	import { getValue, setColor, getColor } from '../../util/auth.js';
	export default {
		components: {
			ledger, detail, categoryManage, billDetail, budget, other
		},
		data() {
			return {
				continuityDay: '',								// 连续签到数
				totalDay: '',									// 总天数
				totalBills: '',									// 总笔数
				accountBook: {},								// 编辑、新增
				accountBookList: [],							// 账本列表
				categoryList: [],								// 分类列表
				budgetList: [],									// 预算列表
				user: {},										// 当前用户
				isBudgetFlag: false, 							// 预算管理
				bill: {},										// 测试使用
				isBillDetailFlag: false,						// 新增账单
				isCategoryFlag: false,							// 分类管理
				isShowCategoryDetail: false,					// 新增分类
				isOtherSettingFlag: false,						// 其他设置
				isShowEditDialog: false,						// 显示账本详情
				roundNum: 20,									// 边框border-radius
				isLedgerFlag: false,							// 显示账本管理
				ledgerList: [],									// 账本集合（包含分类集合）
				isShowPersonDetail: false,						// 上传头像改名字
				settingList: [],								// 设置数据集合
				user: {},
				fileList4: [],
				avatarUrl: '',
				flag: false,
			}
		},
		onLoad() {
			if (!this.avatarUrl) {
				this.avatarUrl = 'https://bk-web-1309566229.cos.ap-guangzhou.myqcloud.com/%E5%A4%B4%E5%83%8F-%E7%94%B7%E5%AD%A6%E7%94%9F1.png';
			}
		},
		mounted() {
			this.initAccountBookList();
		},
		onReady() {
			this.setSettingList();
			let userJson = getValue();
			this.user = JSON.parse(userJson);
			this.init();
			console.log("fdsfds", this.user.username);
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			var that = this;
			this.init(() =>	that.successTips(that.$refs.settingToast, '刷新成功', null));
			uni.stopPullDownRefresh();
		},
		methods: {
			async init(callback) {
				await this.initDay();
				await this.initAccountBookList();
				if (callback) {
					await callback
				}
			},
			/**
			 * 查询总天数
			 */
			async initDay() {
				var that = this;
				await that.$req.getDay().then(res => {
					if (!res.success) {
						that.errorTips(that.$refs.settingToast, res.message, null);
					} else {
						that.continuityDay = res.data.continuityDay;
						that.totalDay = res.data.totalDay;
						that.totalBills = res.data.totalBills;
					}
				})
			},
			/**
			 * 初始化账本
			 */
			async initAccountBookList() {
				var that = this;
				await that.$req.getAccountBookList().then(res => {
					if (!res.success) {
						that.errorTips(that.$refs.settingToast, res.message, null);
					} else {
						that.accountBookList = res.data;
						if (that.accountBookList) {
							that.categoryList = [];
							that.accountBookList.forEach(item => {
								that.categoryList.push(...item.incomeCategoryList);
								that.categoryList.push(...item.payCategoryList);
							});
						}
					}
				})
			},
			/** 点击编辑账本，显示账本详情
			 * @param {Object} item 账本对象
			 * @param {Object} index 索引
			 */
			showAccountDetailCallback(item, index) {
				this.accountBook = JSON.parse(JSON.stringify(item));
				this.changeFlag("isShowEditDialog", true);
			},
			/** 账本管理的卡片删除回调
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			deleteAccountBook(item, index) {
				if (item.id) {
					that.$req.deleteAccountBook(item.id).then(res => {
						if (!res.success) {
							that.errorTips(that.$refs.settingToast, res.message, null);
							return;
						}
						that.successTips(that.$refs.settingToast, res.message, null);
						this.initAccountBookList();
					});
				}
				this.msg("牛逼");
			},
			/** 点击
			 * @param {Object} item1 对象
			 */
			changeItemFlag(item1) {
				item1.flag = true;
				setTimeout(() => {
					if (!item1.showFlag) {
						setTimeout(() => {
							this.successNoIcon(this.$refs.settingToast, "更多功能，敬请期待！！！", null);
						}, 500)
					}
					this.changeFlag(item1.showFlag, true);
					this.sleep(100, 500, () => item1.flag = false);
				}, 400);
			},
			/**
			 * 扫码
			 */
			sweep() {
				// 允许从相机和相册扫码
				var that = this;
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						// {"qrcode":{"token":"b4da3851-9b6b-4874-885a-ca7066cf95dd"}}
						let result = JSON.parse(res.result);
						if (result && result.qrcode) {
							// 发送请求给后端，后端收到请求后发送消息给pc，展示用户名
							that.$req.scanSuccess("key=" + result.qrcode.token + "&username=" + that.user.username).then(res => {
								console.log(res, "res结果")
							});
							that.redirectTo("/manage-login/index?key=" + result.qrcode.token );
						}
					}
				});
			},
			setSettingList() {
				this.settingList = [];
				var arr = [
					{id: 1, name: '账本管理', color: '#e6b451',icon: 'icon-jizhangben', showFlag: 'isLedgerFlag', flag: false},
					{id: 2, name: '分类管理', color: '#4caadf',icon: 'icon-fenleiorguangchangorqitatianchong', showFlag: 'isCategoryFlag', flag: false},
					{id: 3, name: '预算中心', color: '#ef6462',icon: 'icon-yusuanbaobiao', showFlag: 'isBudgetFlag', flag: false},
					{id: 4, name: '定时提醒', color: '#d89c3f',icon: 'icon-guangbo-dingshi', showFlag: '', flag: false},
					{id: 5, name: '其他设置', color: '#4a4c94',icon: 'icon-shezhi', showFlag: '', flag: false},
				];
				var arr2 = [
					{id: 1, name: '给个好评', color: '#f0bc4c',icon: 'icon-geigehaoping', showFlag: '', flag: false},
					{id: 2, name: '问题反馈', color: '#97b93f',icon: 'icon-wentifankui', showFlag: '', flag: false},
					{id: 3, name: '我们的app', color: '#6bc5fd',icon: 'icon-app', showFlag: '', flag: false},
				];
				this.settingList.push(arr, arr2);
			},
			change(name) {
				// this[name]
			},
			/**	切换是否显示新增账户弹窗
			  * @param {Object} name 组件flag名字
			  * @param {Object} flag 是否显示
			  */
			changeFlag(name, flag) {
				this[name] = flag;
			},
			clean() {
				removeToken();
				this.msg("清除成功")
			},
			// 新增图片
			upload() {
				var that = this;
				that.loading = true;
				uni.chooseImage({
					success: (chooseImageRes) => {
						uni.showLoading({title: '上传中', mask: true});
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: that.uploadUrl, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: { 
								'user': 'test'
							},
							success: (result) => {
								var res = JSON.parse(result.data);
								if (res.code ==  200) {
									console.log(res, "res");
									that.loading = false;
									that.msg("上传成功");
									that.avatarUrl = "https://" + res.data;
									setTimeout(() => {
										that.changeFlag("isShowPersonDetail", false);
										uni.hideLoading();
									}, 1000)
								}
							}
						});
					}
				});
				// this.$refs.settingToast.show({message: '成功', icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png', type: 'success'})
				// that.successTips(that.$refs.settingToast, "上传成功", () => that.change("isShowPersonDetail", false));
			},
		}
	}
</script>

<style  lang="scss">
	/* 设置背景颜色 */
	page {
		background-color: #fefdf8;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		width: 100vw;
		min-height: calc(100vh - 250rpx);
	}
	
	.setting-container {
		width: 100%;
		height: 100%;
		padding: 20rpx 20rpx 35rpx 20rpx;
		box-sizing: border-box;
		
		.setting-card-container {
			width: 100%;
			height: 420rpx;
			position: relative;
			border-radius: 20rpx;
			box-shadow: 0px 0px 2px #dfdede;
			
			.setting-card-image-container {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				
				.bgc-png {
					width: 100%;
					height: 100%;
					opacity: 0.2;
					border-radius: 20rpx;
				}
			}
			
			.setting-card-detail-container {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				padding: 20rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				
				
				.setting-card-detail-container-sweep-icon-container {
					width: 100%;
					height: 50rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					
					.setting-card-detail-container-sweep-icon-bgc-content {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: $themeBtnPurpleColor;
						display: flex;
						justify-content: center;
						align-items: center;
						color: $themePurpleColor;
						
						.setting-card-detail-container-sweep-icon-item {
							font-size: 30rpx;
							font-weight: 900;
						}
					}
				}
				
				.setting-card-detail-container-person-container {
					width: 100%;
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
					.setting-card-detail-container-person-avatar-container {
						width: 100rpx;
						height: 100rpx;
						background-color: $avatarBgcGreyColor2;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						.setting-card-detail-container-person-avatar-bgc-content {
							width: 70%;
							height: 70%;
							border-radius: 50%;
						}
					}
					
					.setting-card-detail-container-person-name-container {
						width: 50%;
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: bold;
						.setting-card-detail-container-person-name-content {
							font-size: 30rpx;
							margin-right: 10rpx;
						}
						
						.setting-card-detail-container-person-icon-container {
							
							.setting-card-detail-container-person-icon-content {
							}
						}
					}
				}
				
				.setting-card-detail-container-total-data-container {
					width: 100%;
					height: 150rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: $typefaceGreyColor;
					
					.setting-card-detail-container-total-data-continuity-sign-day-container {
						width: 33%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.setting-card-detail-container-total-data-continuity-sign-day-day {
							color: black;
						}
						.setting-card-detail-container-total-data-continuity-sign-day-title {
							
						}
					}
					
					.setting-card-detail-container-total-data-total-day-booking-container {
						width: 33%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						
						.setting-card-detail-container-total-data-total-day-booking-data {
							color: black;
						}
						.setting-card-detail-container-total-data-total-day-booking-title {
							
						}
					}
					
					.setting-card-detail-container-total-data-total-data-booking-container {
						width: 33%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						
						.setting-card-detail-container-total-data-total-data-booking-data {
							color: black;
						}
						.setting-card-detail-container-total-data-total-data-booking-title {
							
						}
					}
				}
			}
			
		}
		
		.setting-card-setting-container {
			width: 100%;
			min-height: 100rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 27rpx;
			border-radius: 20rpx;
			box-shadow: 0px 0px 2px #dfdede;
			
			.setting-card-setting-item-container {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.setting-card-setting-item-left-container {
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
					.setting-card-setting-item-left-icon {
						font-size: 55rpx;
					}
					
					.setting-card-setting-item-right-content {
						margin-left: 20rpx;
					}
				}
				
				.setting-card-setting-item-right-container {
					
					.setting-card-setting-item-right-icon {
						
					}
				}
			}
			
			// 点击时设置样式
			// .setting-card-setting-item-container:active {
			// 	width: 100%;
			// 	min-height: 100rpx;
			// 	padding: 20rpx;
			// 	box-sizing: border-box;
			// 	margin-top: 20rpx;
			// 	border-radius: 20rpx;
			// 	box-shadow: 0px 0px 2px #dfdede;
			// 	background-color: white;
			// 	// box-shadow: 0 5px #666;
			// 	transform: translateY(20rpx);
			// }
		}
		

		
		.person-container {
			width: 600rpx;
			height: 450rpx;
			background-color: white;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			
			.person-container-avatar-container {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				
				.person-container-avatar-content {
					width: 22%;
					height: 120%;
					border-radius: 50%;
					box-shadow: 0px 0px 2px #dfdede;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $themeBgcLightGreyColor;
					position: relative;
					
					.person-container-avatar-camera-container {
						position: absolute;
						right: -10rpx;
						bottom: -10rpx;
						color: $themePurpleColor;
						
						.person-container-avatar-camera-icon {
							font-size: 40rpx;
						}
					}
				}
				
				
				.upload-avatar {
					position: absolute;
					opacity: 0;
					width: 100%;
					height: 100%;
					left: 35%;
					top: -20rpx;
				}
			}
			
			
			.person-container-name-container {
				width: 100%;
				height: 80rpx;
				border-radius: 50rpx;
				background-color: $themeBgcLightGreyColor;
				margin-top: 50rpx;
				padding: 30rpx;
				box-sizing: border-box;
				
				.person-container-name-input-containe {
					width: 100%;
					height: 100%;
					
				}
			}
			
			.person-container-confirm-container {
				width: 100%;
				height: 80rpx;
				background-color: $themeYellowColor;
				color: $themePurpleColor;
				border-radius: 50rpx;
				margin-top: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	.font-size-big {
		font-size: 60rpx;
	}
	.font-size-small {
		font-size: 50rpx;
	}

</style>
